<template>
	<view class="padding">
		<view class="text-white padding bg radius">
			<u-form :model="shop" label-position="top">
				<u-form-item label="服务分类">
					<u-input v-model="shop.modularName" placeholder="请选择" :disabled="true" @click="getClassifyList()" />
				</u-form-item>
				<u-form-item label="模板类型">
					<u-input v-model="mbTypes[shop.serviceType-1].serviceTypeName" placeholder="请选择" :disabled="true"
						@click="getMbTypesList()" />
				</u-form-item>


				<u-form-item label="服务名称">
					<u-input v-model="shop.serviceName" placeholder="请填写服务名称" />
				</u-form-item>

				<u-form-item label="服务标题">
					<u-input v-model="shop.title" placeholder="请填写服务标题" />
				</u-form-item>

				<u-form-item label="服务价格">
					<u-input v-model="shop.money" @input="ZheKouInput" placeholder="请填写" />
				</u-form-item>

				<u-form-item label="描述">
					<view class="margin-tb-sm">
						<u-input v-model="shop.serviceDescribe" type="textarea" height="200" placeholde="请描述一下您的特长"
							maxlengt="200" :clearable="false" style="background:#F5F5F5;" />
					</view>
				</u-form-item>


				<u-form-item label="单位">
					<u-radio-group v-model="shop.company">
						<u-radio :name="1">天</u-radio>
						<u-radio :name="2">次</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="状态">
					<u-radio-group v-model="shop.isEnable">
						<u-radio :name="1">上架</u-radio>
						<u-radio :name="2">下架</u-radio>
					</u-radio-group>
				</u-form-item>

				<view class="padding bg radius margin-tb" style="padding: 10px 0;">
					<view>
						<view class="text-lg margin-top-sm text-black">图标</view>
						<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
							<view v-if="shop.img">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view class="flex"
										style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
										<image :src="shop.img" style="width: 100%;height: 100%;"></image>
										<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
											@click="removeImgs(1)">
											<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImage(1)" v-else>
								<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
									class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
											</image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="text-lg margin-top-sm text-black">背景图片</view>
						<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
							<view v-if="shop.backgroundImg">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view class="flex"
										style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
										<image :src="shop.backgroundImg" style="width: 100%;height: 100%;"></image>
										<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
											@click="removeImgs(2)">
											<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
										</view>

									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImage(2)" v-else>
								<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
									class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
											</image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view>
						<view class="text-lg margin-top-sm text-black">标识图标</view>
						<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
							<view v-if="shop.icon">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view class="flex"
										style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
										<image :src="shop.icon" style="width: 100%;height: 100%;"></image>
										<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
											@click="removeImgs(3)">
											<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
										</view>

									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImage(3)" v-else>
								<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
									class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
											</image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>


				</view>

				<u-form-item label="商品标签">
					<!-- <u-input v-model="" placeholder="请填写" /> -->
					<view class="flex align-center flex-wrap margin-bottom-sm">
						<view v-for="(item,index) in goodsLabel" :key="index" class="btn flex align-center margin-top">
							<view>{{item}}</view>
							<view class="margin-left-sm" @tap.stop="bindupdata(index)">x</view>
						</view>
						<view class="btns margin-top" @click="addtype1()">+添加</view>
					</view>
				</u-form-item>



				<u-form-item label="注意事项">
					<view class="margin-tb-sm">
						<u-input v-model="shop.mattersThing" type="textarea" height="200" placeholde="请输入注意事项"
							maxlengt="200" :clearable="false" style="background:#F5F5F5;" />
					</view>
				</u-form-item>

				<u-form-item label="服务内容">
					<view class="margin-tb-sm">
						<u-input v-model="shop.serviceInstruction" type="textarea" height="200" placeholde="请输入服务内容"
							maxlengt="200" :clearable="false" style="background:#F5F5F5;" />
					</view>
				</u-form-item>

				<u-form-item label="服务须知">
					<view class="margin-tb-sm">
						<u-input v-model="shop.serviceContent" type="textarea" height="200" placeholde="请输入服务须知"
							maxlengt="200" :clearable="false" style="background:#F5F5F5;" />
					</view>
				</u-form-item>




				<view style="color: #FF4701;font-size: 24upx;">*修改商品、商品售价后，商品规格将重置，请谨慎操作！</view>
			</u-form>
		</view>



		<u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="square" :hair-line="false">提交


		</u-button>

		<!-- 服务分类 -->
		<u-select v-model="flshow" :list="ClassifyList" valueName='modularId' labelName="modularName"
			@confirm="confirm">
		</u-select>

		<!-- 模板类型 -->
		<u-select v-model="mbTypesFlshow" :list="mbTypes" valueName='serviceType' labelName="serviceTypeName"
			@confirm="mbTypesConfirm">
		</u-select>


		<!-- 添加标签弹框 -->
		<u-popup v-model="show2" mode="center" border-radius="14" width="500rpx" height="300rpx" :closeable="closeable">
			<view>
				<view class="padding">
					<view>添加标签</view>
					<view>
						<u-input v-model="typeName" placeholder="请填写" />
					</view>
				</view>
				<view class="addguiges" @click="bindclose1()">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import configdata from '@/common/config.js';
	export default {
		data() {
			return {
				shop: {
					modularName: '', //服务分类
					modularId: '', //服务分类id
					serviceId: '', //服务id
					serviceName: '', //服务名称
					serviceType: '', //模板类型
					title: '', //服务标题
					money: '', //服务价格
					serviceDescribe: '', //描述
					company: 1, //单位 默认值：天(1)
					sort: 1, //排序
					isEnable: 1, //状态 默认值：上架(1)
					img: '', //图标
					backgroundImg: '', //背景图片
					icon: '', //标识图标
					tags: '', //标签
					mattersThing: '', //注意事项
					serviceInstruction: '', //服务内容
					serviceContent: '', //服务须知
					shopId: '',
				},
				attrs: '',
				goodsLabel: [],
				goodsPicture: [],
				goodsParticularsPicture: [],
				customStyle: {
					backgroundColor: '#FFCC00',
					color: '#000000',
					border: 0
				},
				status: 1,
				customStyle1: {
					color: '#000000',
					position: "fixed",
					bottom: "15rpx",
					left: "0rpx",
					right: "0rpx",
					margin: "0rpx 50rpx",
					backgroundColor: '#FFCC00',
				},

				Guigeshow: false,
				//详情图
				goodsCover: [],

				shopId: '',
				page: 1,
				limit: 100,
				list: [],
				listIndex: 0,
				typeIndex: 0,
				typeIndex1: 0,
				wdIndex: 0,
				show: false,
				typeName: '',
				shows: false,
				typeperature: '',
				flshow: false,
				mbTypesFlshow: false,
				ClassifyList: [],
				attrList: {},
				attrLists: [],
				shopId: '',
				show2: false,
				update: 0,
				count: 6,
				editorCtx: '',
				htmlMessage: '',
				closeable: true,
				attrsType: '多规格',
				attrsid: 2,

				mbTypes: [{
						serviceType: 1,
						serviceTypeName: '尊享VIP陪诊'
					}, {
						serviceType: 2,
						serviceTypeName: '全程陪诊'
					},
					{
						serviceType: 3,
						serviceTypeName: '诊前约号'
					},
					{
						serviceType: 4,
						serviceTypeName: '代办问诊'
					},
					{
						serviceType: 5,
						serviceTypeName: '送取结果'
					},
					{
						serviceType: 6,
						serviceTypeName: '专享陪诊'
					},
					{
						serviceType: 7,
						serviceTypeName: '代办买药'
					},
					{
						serviceType: 8,
						serviceTypeName: '院内陪护'
					}
				],

			}
		},
		onLoad(option) {

			if (option.data) {

				uni.setNavigationBarTitle({
					title: '修改服务'
				})

				this.shop = JSON.parse(decodeURIComponent(option.data))
				if (this.shop.tags && this.shop.tags.length > 0) {
					this.goodsLabel = this.shop.tags.split(',')
				}

			}

			this.shop.shopId = this.$queue.getData("shopId")
		},
		onShow() {
			let list = this.$queue.getData('guigeSelectItemList');
			if (list) {
				this.shop.sku = list;
				this.$queue.remove('guigeSelectItemList');
			}

		},
		methods: {

			//键盘校验，只能有一个小数点，小数点后只能有两位
			ZheKouInput(event) {
				this.$nextTick(function() {
					let value = event;

					// 1. 过滤非数字和小数点[1](@ref)
					value = value.replace(/[^\d.]/g, '');

					// 2. 处理多个小数点（保留第一个）
					if ((value.match(/\./g) || []).length > 1) {
						value = value.substring(0, value.lastIndexOf('.'));
					}

					// 3. 处理首位为0的情况（如"012"→"12"）
					if (value.charAt(0) === '0' && value.charAt(1) !== '.' && value.length > 1) {
						value = value.substr(1);
					}

					// 4. 限制小数点后两位[7](@ref)
					const parts = value.split('.');
					if (parts.length > 1) {
						parts[1] = parts[1].substring(0, 2);
						value = parts.join('.');
					}

					this.shop.money = value;
				})

			},



			//获取服务分类
			getClassifyList() {
				let that = this
				let data = {
					page: 1,
					limit: 100
				}
				this.$Request.getA("/admin/hospitalModular/getModularList", data).then(res => {
					if (res.code == 0) {
						this.ClassifyList = res.data.records.map(it => {
							if (it.isEnable == 1) {
								return it
							}
						})
						this.flshow = true
					}
				});
			},

			//获取模板类型
			getMbTypesList() {
				this.mbTypesFlshow = true
			},




			//服务分类
			confirm(e) {

				this.shop.modularName = e[0].label
				this.shop.modularId = e[0].value

			},

			//模板类型
			mbTypesConfirm(e) {
				this.shop.serviceType = e[0].value
			},




			// 图片删除
			removeImgs(e) {
				if (e == 1) {
					this.shop.img = ''
				} else if (e == 2) {
					this.shop.backgroundImg = ''
				} else if (e == 3) {
					this.shop.icon = ''
				}
			},


			// 图片上传
			addImage(e) {

				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								// url: 'https://tcwm.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									let imgUrl = JSON.parse(uploadFileRes.data).data
									if (e == 1) {
										this.shop.img = imgUrl
									} else if (e == 2) {
										this.shop.backgroundImg = imgUrl
									} else if (e == 3) {
										this.shop.icon = imgUrl
									}
									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// 发布
			submit() {

				this.shop.tags = this.goodsLabel.join(',')
				if (!this.shop.serviceName) {
					uni.showToast({
						title: '请填写服务名称',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.shop.modularId) {
					uni.showToast({
						title: '请选择服务分类',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.shop.serviceType) {
					uni.showToast({
						title: '请选择模板类型',
						icon: 'none',
						duration: 1000
					})
					return
				}

				if (!this.shop.title) {
					uni.showToast({
						title: '请填写标题',
						icon: 'none',
						duration: 1000
					})
					return
				}

				if (!this.shop.money) {
					uni.showToast({
						title: '请填写服务价格',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.shop.serviceDescribe) {
					uni.showToast({
						title: '请填写描述',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.shop.img) {
					uni.showToast({
						title: '请上传图标',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.shop.backgroundImg) {
					uni.showToast({
						title: '请上传背景图片',
						icon: 'none',
						duration: 1000
					})
					return
				}

				if (!this.shop.tags) {
					uni.showToast({
						title: '请填写标签',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.shop.serviceContent) {
					uni.showToast({
						title: '请填写服务须知',
						icon: 'none',
						duration: 1000
					})
					return
				}

				if (!this.shop.mattersThing) {
					uni.showToast({
						title: '请填写注意事项',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.shop.serviceInstruction) {
					uni.showToast({
						title: '请填写服务内容',
						icon: 'none',
						duration: 1000
					})
					return
				}


				let url = ''
				if (this.shop.serviceId) {
					//修改
					url = '/admin/hospitalEmploy/updateHospitalEmploy'

				} else {
					//新增
					url = '/admin/hospitalEmploy/addHospitalEmploy'
				}


				this.$Request.postA(url, this.shop).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',

						})

						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			//删除标签
			bindupdata(index) {
				this.goodsLabel.splice(index, 1)
			},
			addtype1() {
				this.typeName = ''
				this.show2 = true

			},
			bindclose1() {
				if (!this.typeName) {
					uni.showToast({
						title: '请填写标签',
						icon: 'none',
						duration: 1000
					})
					return
				}
				this.goodsLabel.push(this.typeName)
				this.show2 = false


			},

		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.bg {
		background-color: #FFFFFF;
	}


	.btn {
		border: 1upx solid #CCCCCC;
		border-radius: 10px;
		padding: 0rpx 30rpx;
		margin-right: 25rpx;
		height: 30px;
		line-height: 30px;
	}

	.boxH {
		background: #FCD202;
		border: none;
	}

	.btns {
		border: 1upx dashed #333333;
		border-radius: 28px;
		padding: 0rpx 35rpx;
		margin-right: 25rpx;
		height: 30px;
		line-height: 30px;
	}

	.active {
		background: #FCD202;
		border: none;
	}

	.actives {
		background: #FCD202;
		border: none;
	}

	.addguige {
		width: 90%;
		margin: 0 auto;
		background: #FCD202;
		box-shadow: 0px 10upx 20upx 0px #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
	}

	.addguiges {
		width: 90%;
		margin: 0 auto;
		background: #FCD202;
		box-shadow: 0px 10upx 20upx 0px #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
		/* position: fixed;
		bottom: 25upx;
		left: 0;
		right: 0; */

	}

	.u-input__textarea {
		background-color: #f5f5f5 !important;
		padding: 10rpx !important;
	}
</style>